import React, { Component } from 'react'
import { connect } from 'react-redux'
import { projectLabelView as projectDuck } from 'ducks'
import { Table } from 'semantic-ui-react'
import { Scrollbars } from 'react-custom-scrollbars'
import Header from './header'
import Row from './row'

class TableView extends Component {
  render() {
    const { labels } = this.props
    return (
      <div style={{ width: '100%', height: '100%' }}>
        <Table compact basic="very" style={{ width: '100%', marginBottom: '0px' }}>
          <Header />
        </Table>
        <Scrollbars
          style={{ width: '100%', height: 'calc(100% - 41px)' }}
          autoHide
          autoHideTimeout={1000}
          autoHideDuration={200}
          ref="scrollbars"
        >
          <Table compact basic="very">
            <Table.Body>
              {labels.map((label, i) => (
                <Row key={label} index={i} id={label} />
              ))}
            </Table.Body>
          </Table>
        </Scrollbars>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  labels: projectDuck.selectors.labels(state),
})

export default connect(mapStateToProps)(TableView)
